import { formatCount, convertCurrency } from '@/utils/common.js';
import { baseUrl } from "@/utils/config.js"

function collectionViews (info) {
  var textCss = { color: '#0050CB' }
  var str = convertCurrency(info.receivableAmount)
  var priceArray = []
  var index = 0
  for (var item of str) {
    priceArray.push({
      type: 'text',
      text: item,
      css: {
        fontWeight: (index + 2 >= str.length || index % 2) ? '400' : 'bold',
        color: (index + 2 >= str.length || index % 2) ? '#333333' : '#0050CB',
        paddingLeft: '6rpx'
      }
    })
    index++
  }

  str = convertCurrency(info.receivableAmount)
  var depositArray = []
  index = 0
  for (var item of str) {
    depositArray.push({
      type: 'text',
      text: item,
      css: {
        fontWeight: (index + 2 >= str.length || index % 2) ? '400' : 'bold',
        paddingLeft: '6rpx'
      }
    })
    index++
  }
  var selectedImage = baseUrl + 'xuanzhongzhifu-c@3x.png'
  var unselectedImage = baseUrl + 'weixuanzhongzhifu-c@3x.png'
  var payArray = []
  for (var item of ['微信', '支付宝', '转账', '现金', '其他']) {
    payArray.push({
      type: 'view',
      css: {
        width: '76rpx',
        height: '34rpx',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      },
      views: [
        {
          type: 'image',
          src: item == info.extend.payType ? selectedImage : unselectedImage,
          css: {
            width: '14rpx',
            height: '14rpx',
            marginRight: '8rpx'
          },
        },
        {
          type: 'text',
          text: item,
          css: {
            color: '#333333'
          }
        }
      ]
    })
  }
  return {
    css: {
      backgroundColor: '#FFFFFF',
      width: '702rpx',
      padding: '24rpx 24rpx 12rpx 24rpx',
      boxSizing: "border-box",
      fontSize: '14rpx',
      color: '#875A38',
      'line-height': '17rpx'
    },
    views: [
    // 标题
    {
        type: 'view',
        css: {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
          fontWeight: 'bold',
          textAlign: 'center',
          marginBottom: '24rpx',
          position: 'relative',
          width: '654rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              height: '34rpx',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              position: 'relative',
              fontSize: '22rpx',
              marginTop: '10rpx'
            },
            views: [
              {
                type: 'text',
                text: info.repairShopName,
              }]
          },
          {
            type: 'view',
            css: {
              height: '6rpx',
              color: 'transparent',
              border: '0 solid #333333',
              borderBottomWidth: '1rpx',
              borderTopWidth: '1rpx',
              'box-sizing': 'border-box',
              position: 'relative',
              fontSize: '22rpx',
            },
            views: [
              {
                type: 'text',
                text: info.repairShopName,
              }]
          },
          {
            type: 'view',
            css: {
              top: 0,
              left: 0,
              position: 'absolute',
            },
            views: [
              {
                type: 'image',
                src: info.extend.logo  ? (info.extend.logo += '?imageView2/2/h/84') : '',
                css: {
                  'flex-shrink': 0,
                  height: '56rpx',
                  // width: '56rpx',
                  marginLeft: '28rpx'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              top: '24rpx',
              right: 0,
              position: 'absolute',
              color: '#875A38'
            },
            views: [
              {
                type: 'text',
                text: info.number,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      // top 行
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'flex-start',
          justifyContent: 'flex-end',
          'min-height': '26rpx',
          marginBottom: '6rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '收款时间：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: info.extend && info.extend.collectionTime.split(' ')[0] || '',
                css: {
                  fontWeight: 'bold',
                  ...textCss
                }
              }
            ]
          }
        ]
      },
      // table
      {
        type: 'view',
        css: {
          border: '2rpx solid #875A38',
          display: 'flex',
          alignItems: 'center',
          'flex-wrap': 'wrap',
          justifyContent: 'space-between',
          marign: '16rpx 0 12rpx 0',
          padding: '6rpx 16rpx 12rpx 16rpx'
        },
        views: [
          // 第一行
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              'box-sizing': 'border-box',
              height: '38rpx',
            },
            views: [
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginRight: '16rpx',
                  width: '96rpx',
                  'flex-shrink': 0,
                },
                views: [
                  {
                    type: 'text',
                    text: '今',
                  }, {
                    type: 'text',
                    text: '收',
                  }, {
                    type: 'text',
                    text: '到',
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  border: '0 solid #875A38',
                  borderBottomWidth: '1rpx',
                  display: 'flex',
                  alignItems: 'center',
                  width: '524rpx',
                  paddingLeft: '4rpx'
                },
                views: [
                  {
                    type: 'text',
                    text: (info.customer.name || '') + '\u00A0\u00A0\u00A0\u00A0' + (info.customer.phone || ''),
                    css: {
                      fontWeight: 'bold',
                      ...textCss
                    }
                  }
                ]
              }
            ]
          },
          // 第二行
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              'box-sizing': 'border-box',
              height: '38rpx',
            },
            views: [
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginRight: '16rpx',
                  width: '96rpx',
                  'flex-shrink': 0,
                },
                views: [
                  {
                    type: 'text',
                    text: '交',
                  }, {
                    type: 'text',
                    text: '来',
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  border: '0 solid #875A38',
                  borderBottomWidth: '1rpx',
                  display: 'flex',
                  alignItems: 'center',
                  width: '524rpx',
                  paddingLeft: '4rpx'
                },
                views: [
                  {
                    type: 'text',
                    text: info.extend.collectionReason,
                    css: {
                      fontWeight: 'bold',
                      ...textCss
                    }
                  }
                ]
              }
            ]
          },
          // 第三行
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              paddingRight: '24rpx',
              'box-sizing': 'border-box',
              height: '38rpx',
            },
            views: [
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  width: '96rpx',
                  marginRight: '16rpx',
                  'flex-shrink': 0,
                },
                views: [
                  {
                    type: 'text',
                    text: '金额（大写)',
                  },
                ]
              },
              {
                type: 'view',
                css: {
                  border: '0 solid #875A38',
                  borderBottomWidth: '1rpx',
                  display: 'flex',
                  alignItems: 'center',
                  width: '348rpx',
                  height: '28rpx',
                  paddingLeft: '4rpx'
                },
                views: [
                  ...priceArray
                ]
              },
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  'box-sizing': 'border-box',
                  height: '38rpx',
                  justifyContent: 'space-between',
                  marginLeft: '24rpx'
                },
                views: [
                  {
                    type: 'text',
                    text: '￥',
                    css: {
                      'flex-shrink': 0,
                      paddingRight: '4rpx',
                      fontSize: '18rpx',
                      color: '#875A38',
                      fontWeight: 'bold'
                    }
                  },
                  {
                    type: 'view',
                    css: {
                      border: '0 solid #875A38',
                      borderBottomWidth: '1rpx',
                      width: '130rpx',
                      display: 'flex',
                      alignItems: 'center',
                      height: '28rpx',
                      paddingLeft: '4rpx'
                    },
                    views: [
                      {
                        type: 'text',
                        text: formatCount(info.receivableAmount),
                        css: {
                          fontWeight: 'bold',
                          ...textCss
                        }
                      }
                    ]
                  }
                ]
              },
            ]
          },
          // 第四行
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              paddingRight: '24rpx',
              'box-sizing': 'border-box',
              height: '38rpx',
            },
            views: [
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginRight: '16rpx',
                  width: '96rpx',
                  'flex-shrink': 0,
                },
                views: [
                  {
                    type: 'text',
                    text: '支',
                  }, {
                    type: 'text',
                    text: '付',
                  },
                  {
                    type: 'text',
                    text: '方',
                  }, {
                    type: 'text',
                    text: '式',
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  paddingLeft: '4rpx',
                  width: '524rpx'
                },
                views: [
                  ...payArray
                ]
              },
              info.extend.sealUrl ?
                {
                  type: 'view',
                  css: {
                    width: '1rpx',
                    height: '28rpx',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'flex-end'
                  },
                  views: [
                    {
                      type: 'image',
                      src: info.extend.sealUrl,
                      css: {
                        'flex-shrink': 0,
                        height: '96rpx',
                      }
                    }
                  ]
                } : {}
            ]
          },
          // 第五行
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              'box-sizing': 'border-box',
              height: '38rpx',
            },
            views: [
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  marginRight: '16rpx',
                  width: '96rpx',
                  'flex-shrink': 0,
                },
                views: [
                  {
                    type: 'text',
                    text: '备',
                  }, {
                    type: 'text',
                    text: '注',
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  border: '0 solid #875A38',
                  borderBottomWidth: '1rpx',
                  display: 'flex',
                  alignItems: 'center',
                  width: '524rpx',
                  paddingLeft: '4rpx'
                },
                views: [
                  {
                    type: 'text',
                    text: info.remark || ' ',
                    css: {
                      'line-height': '18rpx',
                      fontWeight: 'bold',
                      ...textCss
                    }
                  }
                ]
              }
            ]
          },
          // 第六行
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'flex-start',
              'box-sizing': 'border-box',
              'min-height': '30rpx',
              marginTop: '8rpx'
            },
            views: [
              {
                type: 'text',
                text: '电话：',
                css: {
                  "flex-shrink": 0
                }
              },
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'flex-start',
                  width: '120rpx',
                  'min-height': '28rpx',
                  paddingLeft: '4rpx'
                },
                views: [
                  {
                    type: 'text',
                    text: info.phone,
                    css: {
                      fontWeight: 'bold',
                      color: '#333333'
                    }
                  }
                ]
              }, {
                type: 'text',
                text: '地址：',
                css: {
                  "flex-shrink": 0
                }
              },
              {
                type: 'view',
                css: {
                  display: 'flex',
                  alignItems: 'flex-start',
                  width: '408rpx',
                  'min-height': '28rpx',
                  paddingLeft: '4rpx'
                },
                views: [
                  {
                    type: 'text',
                    text: info.shopAddress,
                    css: {
                      fontWeight: 'bold',
                      color: '#333333',
                      'line-height': '18rpx'
                    }
                  }
                ]
              }
            ]
          },
        ]
      },
      // bottom 行
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          height: '34rpx',
          marginTop: '4rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              width: '140rpx',
            },
            views: [
              {
                type: 'text',
                text: '收款人：'
              },
              {
                type: 'text',
                text: info.lister,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          },
          info.extend.customerSignSwitch ?
            {
              type: 'view',
              css: {
                width: '180rpx',
                display: 'flex',
                alignItems: 'flex-start',
                'flex-shrink': 0,
              },
              views: [
                {
                  type: 'text',
                  text: '客户签名：',
                  css: {
                    'flex-shrink': 0,
                  }
                },
				info.extend.customerSign ?
				{
				  type: 'image',
				  src: info.extend.customerSign += '?imageView2/2/h/40',
				  css: {
				    height: '24rpx',
				  }
				}:{}
               
              ]
            } : {
            },
        ]
      }
    ]
  }
}
export default collectionViews